<template>
  <q-page class="row justify-evenly bgColor">
    <div class="contentBox" >
      <div class="indexLeft">
        <div class="text-h6 text-black font-Pf-heavy" style="margin: 5px 0 10px 10px;">项目进度</div>
        <el-card flat bordered class="detail-card">
          <q-card-section>
            <div class="text-h6 text-grey-8">
              <chart-line :chartOption="chartOption" :chartSize="chastSize"></chart-line>
            </div>
          </q-card-section>
        </el-card>
        <div class="line"></div>
        <div class="text-h6 text-black font-Pf-heavy" style="margin: 5px 0 10px 10px; ">概况</div>
        <q-card-section style="padding:0;" class="generalData">
          <div class="row ">
            <div class="col col-7 situation">
              <ul style="list-style-type: none;padding: 0;">
                <li><el-icon
                    style="display: inline-block; vertical-align: middle;font-size: 24px;margin:-3px 5px 0 0;color:#A2EF4D">
                    <CircleCheck />
                  </el-icon>您已创建<i class="blueFont">5</i>个项目</li>
                <li><el-icon
                    style="display: inline-block; vertical-align: middle;font-size: 24px;margin:-3px 5px 0 0;color:#A2EF4D">
                    <CircleCheck />
                  </el-icon>当前有<i class="blueFont">1</i>个训练正在进行中，已进行<i class="blueFont">10</i>min！</li>
                <li><el-icon
                    style="display: inline-block; vertical-align: middle;font-size: 24px;margin:-3px 5px 0 0;color:#A2EF4D">
                    <CircleCheck />
                  </el-icon>您有<i class="blueFont">1</i>个标注任务待完成</li>

              </ul>
            </div>
            <div class="col userData">

              <div class="row ">
                <div class="col col-4">
                  <div class="block">
                    <el-avatar :size="70" :src="url" @error="errorHandler">
                      <img :src=imgErrorUrl />
                    </el-avatar>
                  </div>
                </div>
                <div class="col">我的信息：</div>
              </div>

            </div>
          </div>
        </q-card-section>
        <el-card flat bordered class="detail-card">
          <b>最近快捷操作</b>
          <q-card-section>
            <div class="row shortcut">
              <div class="col col-3" v-for="(item, index) in shortcutArr" :key="index">
                <div class="block">
                  <el-image style="width: 56px; height: 56px" :src="item.icon" fit />
                </div>
                <b>{{ item.title }}</b>
                <div class="textConttent" v-html="item.textContent"></div>
              </div>
            </div>
          </q-card-section>
        </el-card>
      </div>
      <div class="indexRight">
        <el-card flat bordered class="detail-card" style="padding:0 16px;">
          <div class="text-h6 text-black font-Pf-heavy">资源使用情况</div>
          <q-card-section>
            <chart-line :chartOption="chartOption2" :chartSize="chastSize2"></chart-line>
            <chart-line :chartOption="chartOption2" :chartSize="chastSize2"></chart-line>
            <chart-line :chartOption="chartOption2" :chartSize="chastSize2"></chart-line>
          </q-card-section>
        </el-card>
        <div class="line"></div>
        <div class="text-h8 text-black" style="margin: 13px 0 10px 10px;font-weight: bold;">最近项目预览</div>
        <el-card flat bordered class="detail-card" style="position: relative; padding: 0 16px;">
          <hr>
          <q-card-section style="padding: 7px 16px 16px">
            <div class="row latelyTop">
              <div class="col lateData" v-for="(item, index) in latelyData" :key="index">
                <div class="colTitle">
                  <el-icon
                    style="display: inline-block; vertical-align: middle;font-size: 16px;margin:-1px 0 0 0;color:#ccc">
                    <Coin />
                  </el-icon> {{ item.title }}
                </div>
                <div class="bottomData">
                  <div class="dataBox" v-for="(dataItem, index) in item.data" :key="index" style="margin-right: 3px;">
                    <div class="titleBox">{{ dataItem.str }}</div>
                    <div class="numberBox">{{ dataItem.num }}</div>
                  </div>
                </div>
              </div>
            </div>
          </q-card-section>
        </el-card>
      </div>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import iconurl1 from 'assets/indexPageIcon/v2_rgosvm.png'
import iconurl2 from 'assets/indexPageIcon/v2_rfewvm_1.png'
import iconurl3 from 'assets/indexPageIcon/v2_rfewvm_2.png'
import iconurl4 from 'assets/indexPageIcon/v2_rfewvm_3.png'
import { reactive, ref } from 'vue';
import chartLine from 'src/components/chartLine.vue';
const imgErrorUrl = ref('https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png')
const errorHandler = () => true

const shortcutArr = reactive([
  {
    icon: iconurl1,
    title: '数据管理',
    textContent: '支持用户上传数<br>据到后台进行托管'
  },
  {
    icon: iconurl2,
    title: '模型',
    textContent: '支持异构分布式<br>基础资源'
  },
  {
    icon: iconurl3,
    title: '模型管理',
    textContent: '为所有模型<br>提供统一的管理视图'
  },
  {
    icon: iconurl4,
    title: '模型部署',
    textContent: '支持将模型转换为适合<br>业务场景的推理形式'
  }
])
const latelyData = reactive([
  {
    title: '数据',
    data: [{
      str: '数据集',
      num: 10
    },
    {
      str: '特征库',
      num: 10
    }
    ]
  },
  {
    title: '建模',
    data: [{
      str: '模型',
      num: 2
    },
    ]
  },
  {
    title: '训练',
    data: [
      {
        str: '实验',
        num: 1
      },
      {
        str: '训练',
        num: 2
      },
    ]
  },
  {
    title: '注册',
    data: [

      {
        str: '模型库',
        num: 2
      },
    ]
  },
  {
    title: '发布',
    data: [
      {
        str: '发布',
        num: 2
      },
      {
        str: '服务',
        num: 2
      }
    ]
  }
])

const chastSize = reactive({
  width: '90%',
  height: "273px"
})
const chastSize2 = reactive({
  width: '90%',
  height: "165px"
})
const chartOption = reactive({
  tooltip: {
    axisPointer: {
      type: 'shadow', //默认为line，line直线，cross十字准星，shadow阴影
      crossStyle: {
        color: '#fff'
      }
    },
    trigger: 'axis'
  },
  legend: {},
  grid: {
    left: '2%',
    right: '3%',
    bottom: '1%',
    top: '2%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    max: 100
  },
  yAxis: {
    type: 'category',
    data: ['一', '二', '三', '四', '五']
  },
  series: [
    {
      // name: '2011',
      type: 'bar',
      color: 'rgb(108,174,235)',
      data: [100, 80, 90, 45, 60]
    }
  ]
})

const chartOption2 = reactive({
  tooltip: {
    axisPointer: {
      type: 'shadow', //默认为line，line直线，cross十字准星，shadow阴影
      crossStyle: {
        color: '#fff'
      }
    },
    trigger: 'axis',
  },
  grid: {
    left: '1%',
    right: '1%',
    bottom: '5%',
    top: '8%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['项目一', '项目一', '项目一', '项目一', '项目一', '项目一', '项目一']
  },
  yAxis: {
    type: 'value',
    max: 100
  },
  series: [
    {
      name:'GPU',
      data: [20, 30, 50, 80, 30, 40, 65],
      color: 'rgb(108,174,235)',
      type: 'line',
    }
  ]
})


</script>
<style lang="scss" scoped>
.bgColor {
  background-color: rgb(245 245 245) !important;
}

.contentBox {
  display: flex;
  width: 90%;
  margin: 0 auto;
  position: relative;

  .indexLeft,
  .indexRight {
    flex: 1;
    padding: 10px;

  }

  .line {
    width: 97%;
    height: 1px;
    background: #bbb;
    margin: 10px auto;

  }

  .blueFont {
    color: #3D5CE4;
    font-size: 17px;
    font-style: initial;
  }

  .generalData {
    margin-bottom: 10px;
    color: #101010;

    .situation,
    .userData {
      background: white;
      padding: 20px;
      border-radius: 4px;
      box-shadow: 0 0 10px 1px #ddd;
    }

    .situation {
      margin-right: 12px;

      ul {
        li {
          margin-bottom: 10px;
        }
      }
    }

    .userData {}
  }


  .shortcut {
    text-align: center;

    .textConttent {
      font-size: 13px;
    }
  }

  hr {
    position: absolute;
    width: 100%;
    background-color: #75F9FD;
    height: 1px;
    border: none;
    left: 0;
    top: 32px;
  }

  .latelyTop {
    position: relative;
    margin-bottom: 15px;

    .col {
      .colTitle {
        border: 1px solid #75F9FD;
        background-color: rgba($color: #B4FDFF, $alpha: .43);
        display: inline-block;
        border-radius: 3px;
        padding: 3px 15px 3px 10px;
        font-size: 12px;
        margin-bottom: 10px;
      }
    }

  }

  .bottomData {
    display: flex;
    text-align: center;

    .titleBox {
      width: 57px;
      border: 1px solid #bbb;
      background-color: rgba($color: #E6F7FF, $alpha: 1);
      border-radius: 3px;
      padding: 5px 2px;
      font-size: 13px;
      margin-right: 2px;
    }

    .numberBox {
      border: 1px solid #bbb;
      background-color: rgba($color: #1484FC, $alpha: 1);
      border-radius: 3px;
      padding: 5px 2px;
      font-size: 13px;
      margin-right: 2px;
      color: white;

    }
  }


  .lateData {

    &:nth-child(1),
    &:nth-child(3),
    &:nth-child(5) {
      .bottomData {
        margin-left: -20px;
      }
    }

    &:nth-child(2),
    &:nth-child(4) {
      .bottomData {
        margin-left: 7px;
      }
    }
  }

}
</style>
